<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>基础设置</el-breadcrumb-item>
      <el-breadcrumb-item>系统公告</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片搜索图表 -->
    <el-card v-loading="loading">
      <div>
        <el-form :inline="true" :model="searchForm">
          <el-form-item>
            <el-input placeholder="请输入标题" v-model="searchForm.search.title"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button type="primary" @click="dialogVisible = true">添加</el-button>
          </el-form-item>
        </el-form>
      </div>

      <el-table :data="table_data" border style="width: 100%">
        <el-table-column type="index" label="序号" width="60px"></el-table-column>
        <el-table-column prop="title" label="标题" width="300px"></el-table-column>
        <el-table-column prop="create_time" label="创建日期"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="danger" icon="el-icon-delete" @click="deleteHandle(scope.row)"></el-button>
            <el-button
              type="primary"
              icon="el-icon-view"
              @click="viewForm = scope.row; viewDialogVisible = true;"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="search"
        :current-page.sync="searchForm.page_no"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="searchForm.page_size"
        layout="total, sizes, prev, pager, next"
        :total="count"
      ></el-pagination>
    </el-card>

    <!--  新增字典对话框-->
    <el-dialog title="新增" :visible.sync="dialogVisible" width="50%">
      <el-form
        class="add-form"
        ref="addFormRef"
        :model="addForm"
        :rules="addFormRules"
        label-width="80px"
      >
        <el-form-item label="标题" prop="title">
          <el-input v-model="addForm.title"></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="context">
          <el-input type="textarea" :rows="8" v-model="addForm.context"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="add">确 定</el-button>
      </span>
    </el-dialog>

    <!--  新增字典对话框-->
    <el-dialog title="预览" :visible.sync="viewDialogVisible" width="50%">
      <el-form label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="viewForm.title" disabled></el-input>
        </el-form-item>
        <el-form-item label="详情" prop="context">
          <el-input type="textarea" :rows="8" v-model="viewForm.context" disabled></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="viewDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'Billboard',
  data() {
    return {
      dialogVisible: false,
      viewDialogVisible: false,
      loading: false,
      searchForm: {
        page_no: 1,
        page_size: 10,
        search: {
          title: ''
        }
      },
      addForm: {
        title: '',
        context: ''
      },
      viewForm: {},
      nodes: [],
      // 表单验证，需要在 el-form-item 元素中增加 prop 属性
      addFormRules: {
        title: [{ required: true, message: '标题不可为空', trigger: 'blur' }]
      },
      table_data: [],
      count: 0
    };
  },

  mounted() {
    this.search();
  },
  methods: {

    search: async function() {
      this.loading = true;
      const { data: resp } = await this.$http.post(
        'billboard/find',
        this.searchForm
      );
      this.loading = false;
      if (resp.code === 0) {
        this.table_data = resp.data;
        this.count = resp.count;
      } else {
        this.$message({
          showClose: true,
          message: resp.msg,
          center: true,
          type: 'error'
        });
      }
    },
    deleteHandle: async function(score) {
      this.loading = true;
      const { data: resp } = await this.$http.post('billboard/delete', score);
      if (resp.code === 0) {
        this.search();
      }
      this.loading = false;

      this.$message({
        message: resp.msg,
        type: resp.code === 0 ? 'success' : 'error'
      });
    },
    handleSizeChange: function(newPageSize) {
      this.searchForm.page_size = newPageSize;
      this.search();
    },
    handleCurrentChange: function() {},
    add: async function() {
      this.$refs.addFormRef.validate(async valid => {
        if (!valid) return;

        this.loading = true;
        var body = this.addForm;
        const { data: resp } = await this.$http.post('billboard/save', body);
        this.$message({
          message: resp.msg,
          type: resp.code === 0 ? 'success' : 'error'
        });

        if (resp.code === 0) {
          this.search();
          this.addForm.title = '';
          this.addForm.context = '';
        }
        this.dialogVisible = false;
        this.loading = false;
      });
    }
  }
};
</script>

<style lang="less" scoped>
.add-form .el-cascader {
  width: 100%;
}
</style>
